<!DOCTYPE html>
<!--
/*********************************************************************************************
* index.html                                                                                 *
*                                                                                            *
* Abstract: Content layout for the HTML5VideoPlayer sample.                                  *
*                                                                                            *                                                                                            *
* Version 0.1.0 (2010-04-26)                                                                 *
* Copyright (c) 2010 Dario Caruso                                                            *
*                                                                                            *
**********************************************************************************************
*/
-->
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<!--[if IE]><link rel="stylesheet" type="text/css" href="css/style2.css" /><![emdif]-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
        </script>
        <script type="text/javascript" src="script/script.js">
        </script>
    </head>

    <!-- Check if the device is Apple Ipad or Iphone -->
	<body onload="ipad_function()">
        
		<!-- Main Content -->
        <div id="main">
            
			<!-- Header -->
            <div id="header">
            	<div id="logo"></div>
            </div>
							
			<!-- Header -->
			<div id="first">
				<div id="welcome">
					<h1>Welcome!</h1>
					<p class="desc">What you are dealing with here is a pure javascript driven HTML5 video experience. 
					Flash is used only whenever there is no native H.264 support available. 
					In such cases a minimalistic SWF which mimics an HTML5 video element as good as necessary is used..</p>
				</div>
			</div>
			
			<!-- Right -->
			<div id="right">
				
				<!-- Video -->
                <video id="player" src="video/video.mp4" type="video/mp4">
                	<!-- Object Flash Player -->
                    <object type="application/x-shockwave-flash" data="player.swf" id="playerF">
                    	<param name="quality" value="high"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="sameDomain"><param name="wmode" value="transparent"><param name="flashvars" value="hq=video/video.mp4&amp;autoplay=true">
                    </object>
               </video>
					
				<!-- Poster -->
                <div id="poster">
                	<button type="submit" class="button" onclick="start();return(false)" display:"none"></button>
                </div>
		   	</div>
				
			<!-- Second -->	
			<div id="second">

				<!-- Features And Support -->	
				<div id="features_and_support">
                	
					<!-- Features -->	
					<div id="features">
                		<ul id="features_list">
							<h5>Features</h5>
            				<li>Free &amp; Open Source</li>
            				<li>100% skinnable using CSS</li>
            				<li>Standalone pure JavaScript library</li>
            				<li>Easy to use</li>
            				<li>Easy to understand &amp; extend</li>
            				<li>Consistent look between browsers</li>
            				<li>Full Window Mode</li>
            				<li>Volume Control</li>
            				<li>Fallback to Flash Player</li>
            				<li></li>
          				</ul>
					</div>
					
					<!-- Supported -->	
					<div id="supported">
						<h5>Download</h5>
						<div class="supported-section">
            				<a href="http://code.google.com/p/html5player/downloads/detail?name=Project.zip&can=2&q=" title="Zip Download"><img src="css/img/zip.png" alt="Zip Download"></a>
            				<a href="http://code.google.com/p/html5player/downloads/detail?name=Project.tar&can=2&q=" title="Tar Download"><img src="css/img/tar.png" alt="Tar Download"></a>
          				</div>						
						<h5>Supported Browsers</h5>							
						<div class="supported-section">
            				<a href="http://www.mozilla.com/en-US/firefox/firefox.html" title="Firefox"><img src="css/img/firefox.png" alt="Firefox"></a>
            				<a href="http://www.apple.com/safari/" title="Safari"><img src="css/img/safari.png" alt="Safari"></a>
            				<a href="http://www.google.com/chrome" title="Chrome"><img src="css/img/chrome.png" alt="Chrome"></a>
            				<a href="http://www.opera.com/" title="Opera"><img src="css/img/opera.png" alt="Opera"></a>
          				</div> 
						<h5>Fallback Support For</h5>
						<div class="supported-section">
            				<a href="http://www.microsoft.com/windows/Internet-explorer/default.aspx" title="IE"><img src="css/img/ie.png" alt="IE"></a>
          				</div>
						<h5>Supported Formats</h5>
						<div class="supported-section">
            				<a href="http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC" title="h264"><img src="css/img/h264.png" alt="h264"></a>
            				<a href="http://www.theora.org/" title="Ogg"><img src="css/img/ogg.png" alt="Ogg"></a>
          				</div>
                		<h5>Compatible With</h5>
						<div class="supported-section">
            				<a href="http://www.apple.com/iphone/" title="iPhone"><img src="css/img/iphone.png" alt="iPhone"></a>
            				<a href="http://www.apple.com/ipad/" title="iPad"><img src="css/img/ipad.png" alt="iPad"></a>
          				</div>
					</div>
				</div>
				
				<!-- Footer -->	
				<div id="footer"></div>
		</div>
     </body>
</html>
